<template>
  <div class="repairmanHistory">
    <div class="headCrm">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">维修历史</span>
        </p>
    </div>  
    <div class = "contentCrm">
            <div class="repairmanDetailList">
                <ul>
                    <li>
                      <p>客户名称</p>
                      <span>{{repairmanHistory.customerName || '--'}}</span>
                    </li>
                    <li>
                      <p>联系电话</p>
                      <span>{{repairmanHistory.contactPhone || '--'}}</span>
                    </li>
                    <li>
                      <p>商品名称</p>
                      <span>{{repairmanHistory.productName || '--'}}</span>
                    </li>
                    <li>
                      <p>品牌</p>
                      <span>{{repairmanHistory.brandName || '--'}}</span>
                    </li>                
                </ul>
                <div class="detil-history-h">
                      <button class="a" @click="detailhistorybut">详情</button>
                      <button class="b mlcfont">历史</button>
                </div>
                <div class="history" v-for="(item,index) in repairmanHistory.history" :key='index'>
                      <span class="el-icon-time"></span>
                      <span class="history-text">{{item.text}}</span>
                      <div :class="index==repairmanHistory.history.length-1?'':'historyLine'"></div>
                </div>     
            </div>
    </div>
    <div class = "footCrm-repair">
      <div>
          <button  class="but-end" @click="end">完工</button>
          <button  class="but-run" @click="follow">写跟进</button>
      </div>
        
    </div>
  </div>


</template>

<script>
export default {
  name: 'repairmanHistory',
  data() {
    return {
      repairmanHistory: {
        // customer: 'mhy',
        // customerPhone: '13301938199',
        // goods: '锤子',
        // brand:'CROWN',
        // history:[
        //   {text:'Create a service site 2015-09-01'},
        //   {text:'Solve initial network problems 2015-09-01'},
        //   {text:'Technical testing 2015-09-01'},
        //   {text:'Network problems being solved 2015-09-01'}
        // ]
      },
    };
  },
  mounted: function(){
    // this.loading = true;
    let _this = this;
    this.$fetch(this.$root.domainIp+'maintain/apporder/historys/'+localStorage.getItem("detailId"))
    .then((response) => {
        // this.loading = false;
        if(response.code == 0){
            let json_data = JSON.parse(this.decrypt(response.data));
            this.repairmanHistory = json_data;
            this.repairmanHistory.history = [];
            json_data.orderHistory.forEach(item => {
              this.repairmanHistory.history.push({text:item.content+item.remark+item.sysCreatedTime})
            });
        }else {
            _this.$message({
                message:(response.message || '请检查网络是否连接'),
                center: true
            });
        }
    }).catch(function (error) {
        // this.loading = false;
        console.log(error);
        _this.$message({
            message:('请检查网络是否连接'),
            center: true
        });
    });
  },
  methods: {
    returnPage:function(){
          console.log('returnPage')
          this.$router.push({
            path:'/repairman'
          })  
    },
    detailhistorybut:function(){
          this.$router.push({
            path:'/repairmanDetail'
          }) 
        console.log('detailhistorybut:'+this.detailHistory)
    },
    end:function(){
      this.$router.push({
      path:'/repairmanEnd'
      })  
    },
    follow:function(){
      this.$router.push({
      path:'/repairmanFollow'
      })               
    },
  },
};
</script>

<style scoped>
/* headCrm */
  .headCrm{
    width:100%;
      background: #ff5000;
      position:fixed;
      top:0%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }

/* contentCrm */
  .contentCrm{
    width: 90%;
    margin-left: 5%;
    margin-top:13%;
  }

  .repairmanDetailList ul li p{
      width:30%;
      float: left;
      color: #646464;
  }
  .repairmanDetailList ul li {
    padding: 0.38rem 0rem;
  }
  .repairmanDetailList ul {
    margin: 0.6rem 0rem 0rem 0rem;
    font-size: 0.33rem;
  }
  .repairmanDetailList ul li span{
    float: right;
  }
  .login-btn.mlcbg{
      width: 100%;
  }
  .login-btn.mlcbg p{
    color:#fff;
  }
  .afult{
    color:#ff5000;
    margin-bottom: 0.2rem;
  }
  .afultText{
    line-height: 0.55rem;
  }

  .detil-history-h .a,.detil-history-h .b{
      border:0.01rem solid #E6E6E6;  
      width: 49%;
      height: 0.7rem;
      display:inline-block;
      text-align:center;
      margin-top:0.5rem;
      margin-bottom: 0.5rem;
      line-height:0.7rem;
      background-color: #ffffff;
      font-size: 0.33rem;
  }
  .detil-history-h .a{
    float: left;
  }
  .historyLine{
    height: 0.5rem;
    border-left:0.01rem solid #ff5000;
    margin-left: 0.1rem;
  }
  .history{
    color: #646464;
  }
  .history-text{
    width:94.5%;
    float: right;
  }


/* footCrm */
  div.footCrm-repair{
    width: 100%;
    height: 0.8rem;
    background-color:#E6E6E6;
    position:fixed;
    bottom:0%;
  }
  .but-end,.but-run{
    width: 1.33rem;
    height: 0.6rem;
    background-color: #ffffff;
    margin: 0.1rem 0;
    border:0.05rem solid #E6E6E6;    
  }
  .but-end{
    margin-left:3.5rem;
  }
  .but-run{
    margin-left:0.7rem;
  }

</style>
